<template>
  <div class="edit-check-page">
    <van-nav-bar title="设置密码" left-arrow @click-left="onClickLeft" />
    <div class="login-body">
      <van-cell-group>
        <van-field
          v-model="password"
          clearable
          label="新密码"
          placeholder="请输入新密码"
          maxlength="100"
          left-icon="lock"
          :type="isEyeClose1 ? 'password' : 'text'"
          :right-icon="isEyeClose1 ? 'closed-eye' : 'eye-o'"
          @click-right-icon="isEyeClose1=!isEyeClose1"
        />
        <van-field
          v-model="passwords"
          clearable
          label="确认新密码"
          placeholder="请输入密码"
          maxlength="100"
          left-icon="lock"
          :type="isEyeClose2 ? 'password' : 'text'"
          :right-icon="isEyeClose2 ? 'closed-eye' : 'eye-o'"
          @click-right-icon="isEyeClose2=!isEyeClose2"
        />
        <div class="main-btn" @click="sureHandle">下一步</div>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar, Icon } from "vant";
import { CellGroup, Field, Toast } from "vant";

Vue.use(CellGroup)
  .use(Field)
  .use(Icon)
  .use(NavBar);
const aweixin = null;
export default {
  data() {
    return {
      password: "",
      passwords: "",
      isEyeClose1: true,
      isEyeClose2: true,
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    jumpLink(path, query) {
      this.$router.push({ path, query });
    },
    sureHandle() {
      if (!new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$").test(this.password)) {
        Toast("请设置6~20位数字+字母组合的密码");
        return
      }
      if (this.password !== this.passwords) {
        Toast("两次输入的密码不一致");
        return;
      }
      this.jumpLink('editCheck',{mode:'password',password:this.password})
    }
  }
};
</script>
<style lang="scss" scoped>
.edit-check-page {
  .right-tips {
    color: #ccc;
  }
  .login-body {
    margin-top: 10px;
    .van-cell-group {
      overflow: hidden;
    }
    .welcome-word {
      font-size: 30px;
      margin-top: 80px;
    }
    .main-btn {
      margin: 30px auto;
      width: 86%;
      height: 40px;
      color: #fff;
      background: $red;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
    }
    .code-operate {
      color: $red;
      .gray {
        color: #ccc;
      }
    }
  }
}
</style>